<?php session_start(); ?>
<head>
    <meta charset="iso-8859-1"/>
    <script type="text/javascript">
  
        $(document).ready(function(){
             
        
            $('#infoFamiliar').submit(function(event){ //en el evento submit del fomulario

                event.preventDefault();  //detenemos el comportamiento por default
      
                if(event.target.name == "editFamiliar") 
                {
                    var datos = $(this).serialize();
                    datos+="&id_contacto="+$("#id_contacto").val();
                        
                  
                    $.post("updateFamiliar.php",datos, function(data)
                    {
                        if(data) 
                        {    
                            alert(data);
                            var result = jQuery.parseJSON(data);
                        
                            //   alert(result.result);
                            if(result.result)
                            {
                                $("#mensaje").empty();
                                $("#mensaje").append("Su familiar ha sido modificado correctamente");
                                $("#mensaje").css('display','inline');
                                $("#mensaje").css('color','#00b900');
                                $("#mensaje").fadeOut(3000);
                                var newFamiliar = '<tr id='+result.id_contacto+'><td>'+result.nombres+' '+result.apellidos+'</td>';
                                newFamiliar+= '<td>'+result.mail+'</td>';
                                newFamiliar+= '<td> <a class="a-familiar-edit" title ="Editar Contacto"> <img src="images/editar.png" width="25" height="25"/></td>';
                                newFamiliar+= '<td> <a class="a-familiar-del" title="Borrar Contacto">';
                                newFamiliar+= '<img src="images/borrar.png" width="25" height="25"/></a></td></tr>';
                                $("#lista-familiar tr#"+result.id_contacto).replaceWith(newFamiliar);
                                
                                
                            }
                
                        }
            
                    });
                      
                        
                }
                    
                else
                {
                 
                    var url = $(this).attr('action');  //la url del action del formulario
                    var datos = $(this).serialize(); // los datos del formulario
                
                    $.ajax({
                        type: 'POST',
                        url: url,
                        data: datos,
                        dataType: 'text',
                        beforeSend: function(){
                            $("#cargando").css('display','inline');
                            $('#cargando').fadeIn(4000); 
                        
                        }, //algun icono que indique se esta enviando la informacion
                        success: function(data) {
                            $('#cargando').fadeOut("fast");
                    
                            $("#mensaje").empty();
                             
                            if(data != 0){     
                         
                                $("#mensaje").append("Su familiar ha sido guardado correctamente");
                                $("#mensaje").css('display','inline');
                                $("#mensaje").css('color','#00b900');
                                $("#mensaje").fadeOut(3000);
                                var nombres = $("#nombres").val();
                                var apellidos = $("#apellidos").val();
                                var mail = $("#mail").val();
                         
                                var newFamiliar = '<tr id='+data+'><td>'+nombres+' '+apellidos+'</td>';
                                newFamiliar+= '<td>'+mail+'</td>';
                                newFamiliar+= '<td> <a class="a-familiar-edit" title ="Editar Contacto"> <img src="images/editar.png" width="25" height="25"/></td>';
                                newFamiliar+= '<td> <a class="a-familiar-del" title="Borrar Contacto">';
                                newFamiliar+= '<img src="images/borrar.png" width="25" height="25"/></a></td></tr>';
                            
                                if($.find("#sinfamiliares"))
                                    $("#sinfamiliares").remove();
                            
                                $("#lista-familiar").append(newFamiliar)
                                .on("click",".a-familiar-del",function(event){
                                    eliminarFamiliar(event);
                                });
                         
                            }
                            else{
                                $("#mensaje").append("Ocurrio un error al guardar la informacion de su familiar");
                                $("#mensaje").css('display','inline');
                                $("#mensaje").css('color','#ff0000');
                                $("#mensaje").fadeOut(3000);
                            }
                        }
                    
                    });
        
              
                }
            });
        
            $("#backAdd").click(function(){
            
                $('legend#add').replaceWith("<legend id='add'>Agregar Familiar</legend>");
                        
                $("#add_submit").css('display','block');
                $("#edit_submit").css('display','none');
                $("#nombres").val("");
                $("#apellidos").val("");
                $("#mail").val("");
                $("#rut").val("");
                $("#infoFamiliar").attr("name","addFamiliar");
                        
            
            });
            
            $(".a-familiar-edit").click(function(event){
            

               
                //se obtiene la fila asociada al contacto
                var fila = $(this).parents("tr");
                
                var contact = $(fila).attr("id") ;
                //se obtiene nombre del contacto
                var name = fila.get(0).cells[0].innerText;
             
       

                $.post("getDataFamiliar.php",{contact:contact},function(data)
                {
                    if(data) 
                    {    
                        var familiar = jQuery.parseJSON(data);
                        
                        $("#nombres").val(familiar.nombres);
                        $("#apellidos").val(familiar.apellidos);
                        $("#rut").val(familiar.rut);
                        $("#mail").val(familiar.mail);
                        $("<input id='id_contacto' type='hidden' value='"+contact+"'></input>").appendTo("#infoFamiliar");
                        
                        $('legend#add').replaceWith("<legend id='add'>Editar Familiar</legend>");
                        $("#infoFamiliar").attr("name","editFamiliar");
                        $("#add_submit").css('display','none');
                        $("#edit_submit").css('display','block');
                
                    }
            
                });
                
            });
            
            $(".a-familiar-del").click(function(event){
            
         
                eliminarFamiliar(this);
            
            });
            
 
        });
        
        function mostrarLoader(){
            $('#cargando').fadeIn(4000); //muestro el loader de ajax
        }
    
        function eliminarFamiliar(event){
        
            var fila = $(event).parents("tr");
             
            var contact = $(fila).attr("id") ;
            
            //se obtiene nombre del contacto
            //volver a implementar.
            var name = fila.get(0).cells[0].innerText;
             
       
            if (confirm("Seguro que desea eliminar a "+name+"?")) { 
                $.post("borrarFamiliar.php",{contact:contact},function(data)
                {
                    if(data) 
                        fila.remove();
                }); 
            }
        
        };
    </script>


</head>
<form  id="infoFamiliar" name="infoFamiliar" method="post" action="agregarFamiliar.php" style="float: left">
    <fieldset id="form">
        <legend id="add">Agregar Familiar</legend>
        <ol>
            <li><label>Nombre: </label><input id="nombres" type="text" name="nombres" value="" size="25" placeholder="ingrese el nombre " required /></li>
            <li><label>Apellidos: </label><input id="apellidos" type="text" name="apellidos" value=""  size="25" placeholder="ingrese el apellido" required /></li>
            <li><label>Rut: </label><input id="rut" type="text" name="rut" value="" size="25" placeholder="Ingrese el rut " pattern="^\d{1,2}\d{3}\d{3}[-][0-9kK]{1}$" title="rut de la forma 123456789-0"  required/></li>  
            <li><label>Email: </label><input id="mail" type="email" name="mail" value=""  size="25" placeholder="nombre@ejemplo.com" required /></li>
            </ul>
            <p id="add_submit" align="center"><input type="submit" name="submit_add" class="botonEnviar" value="Agregar Familiar" /></p>
            <p id="edit_submit" align="center" style="display:none;" ><input type="button" id="backAdd" class="botonEnviar" value="Agregar Familiar"/> <input type="submit" name="submit_edit" class="botonEnviar" value="Editar Familiar"/></p>
            <span id="mensaje" style="display:none;"> <center><img  style="display:none;" id="cargando" widht="43" height="11" src="images/ajax-loader.gif"/><br/>Cargando...</center></span>

    </fieldset>
</form>

<?php
include_once("FuncionBd/dbconnect.inc.php");


$data = getUsuario($_SESSION['k_username']);
$idUser = $data->id_user;
$idsFamiliares = getIdFamiliarContacto($idUser);
?>
<fieldset id="form">
    <legend>Familiares Agregados</legend>
    <table id="lista-familiar" summary="Employee Pay Sheet">
        <thead>
            <tr>
                <th scope="col">Familiar</th>
                <th scope="col">Mail</th>

            </tr>
        </thead>
        <tbody>

            <?php
            if (isset($idsFamiliares)) {
                foreach ($idsFamiliares as $id_familiar) {

                    $familiar = getFamiliar($id_familiar->id_contacto);
                    echo '<tr id=' . $id_familiar->id_contacto . ' >';
                    echo '<td>' . $familiar->nombres . ' ' . $familiar->apellidos . '</td>';
                    echo '<td>' . $familiar->mail . '</td>';
                    echo '<td> <a class="a-familiar-edit" title="Editar Contacto" ><img src="images/editar.png" width="25" height="25"/></a></td>';
                    echo'<td> <a  class="a-familiar-del" title="Borrar Contacto">';
                    echo '<img src="images/borrar.png" width="25" height="25" /> </a></td></tr>';
                }
            }
            else
                echo '<tr id="sinfamiliares"> <td> <h3>No posee </h3> </td> <td> <h3>Familiares Agregados</h3> </td> </tr>';
            ?>


        </tbody>
    </table>
</fieldset>